import { ActionType, ProColumns, ProTable } from "@ant-design/pro-components";
import { Button, Input, InputNumber, message, Modal, Tag } from "antd"
import { useRef } from "react";
import { create_embedding, textSegmentation } from "../../../api/request";
import CustomSelect from "../../../components/CustomSelect";
import { useRequest } from "ahooks";


interface PropsType {
    open: boolean;
    text: string
    onClose: () => void;
}


export default (props: PropsType) => {
    const { open, onClose, text } = props
    const actionRef = useRef<ActionType>();
    const { loading: createLoading, run: createRun } = useRequest(create_embedding, {
        manual: true,
        onSuccess: (result) => {
            if (result.code == 200) {
                message.success('分块成功')
                Modal.destroyAll();
                onClose()
            } else {
                message.error('分块失败')
            }
        }
    })
    const saveData = useRef<string[]>([])
    const documentId = useRef<number>(0)

    const columns: ProColumns<Chunk>[] = [
        {
            title: '文本',
            dataIndex: 'text',
            width: 180,
            search: false,
            renderFormItem: () => <Input.TextArea />
        },
        {
            title: '字数',
            dataIndex: 'text',
            width: 50,
            search: false,
            render: (text, record,) => {
                return <Tag color="red">{record.text.length}</Tag>
            }
        },
        {
            title: '块大小',
            dataIndex: 'chunkSize',
            hideInTable: true,
            renderFormItem: () => <InputNumber />
        },
        {
            title: '重叠',
            dataIndex: 'chunkOverlap',
            hideInTable: true,
            renderFormItem: () => <InputNumber />
        },
        {
            title: '相似度阀值',
            dataIndex: 'threshold',
            hideInTable: true,
            renderFormItem: () => <InputNumber max={1} />
        }
    ]

    return <>
        <Modal open={open}
            footer={() =>
                [<CustomSelect className="mr-2"
                    onChange={(id) => {
                        documentId.current = id
                    }} />,
                <Button type="primary"
                    onClick={() => {
                        if (documentId.current) {
                            createRun({
                                id: documentId.current,
                                document: saveData.current
                            })
                        } else {
                            message.error("请选择文档")
                        }
                    }}>确定分块</Button>]
            }
            title="语意文本分块"
            width={1200}
            onClose={() => onClose()}
            confirmLoading={createLoading}
            onCancel={() => onClose()}>
            <ProTable<Chunk>
                form={
                    {
                        initialValues: {
                            text,
                            chunkSize: 1000,
                            chunkOverlap: 50,
                            threshold: 0
                        }
                    }
                }
                style={{ height: 600, overflow: 'auto' }}
                columns={columns}
                request={async (params) => {
                    params.text = text
                    const data = await textSegmentation(params as Chunk)
                    saveData.current = data.data.map(item => item.text)
                    return data
                }}
                actionRef={actionRef}
                search={{
                    defaultCollapsed: false, // 默认收起
                    searchText: '分块',
                }}
                editable={{
                    type: 'multiple',
                }}
                options={false}
                rowKey="id"
                scroll={{ x: 200 }}
                pagination={{
                    pageSize: 10
                }}
                dateFormatter="string"
            />
        </Modal>
    </>
}